<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>付费视频商城 | 注册</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/comm.css">
    <link rel="stylesheet" href="./css/register.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/popper.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 头部部分 -->
    <header>
        <div id="header"></div>
    </header>
    <div class="container no-gutters  m-auto">
        <div class="row  no-gutters w-100">
            <!-- 左边文字部分 -->
            <div id="explian" class="col-lg-8 col-sm-12 mt-lg  pr-lg-5 mb-sm-5">
                <div class="text-sm-center text-lg-left " id="title"><span class="span1 pb-1 ">登录/注册</span></div>
                <div id="content">
                    <p>说明：</p>
                    <p>1、演示用户名：demouser；密码： demo1234</p>
                    <p> 2、实际使用之前，需配置用户管理组件中的相关邮件。详情请参考教程：《用户管理中相关邮件的配置》</p>
                    <p> 3、新用户注册后的审核方式有三种：自动核准、邮件激活、需要管理员批准（即人工审核），详情可参考教程《如何设置用户注册后的审核方式》</p>
                </div>
            </div>

            <!-- 右边注册框 -->
            <div id="register" class="col-lg-4  col-md-6  offset-lg-0 offset-md-6">
                <div class="p-4">
                    <div><span>电话号码</span><i class="iconfont i-color">&#xe64c;</i></span>
                        <input type="text" class="border w-100 mb-2">
                        <div><span>短信验证码</span><i class="iconfont i-color">&#xe64c;</i></div>
                        <div class="mx-0" id="div-input">
                            <input type="text" class="input-yz  border">
                            <button class="btn-right">获取</button>
                        </div>
                        <div></div><span>密码</span><i class="iconfont i-pwd">&#xe718;</i><i class="iconfont i-color">&#xe64c;</i>
                    </div>
                    <input type="text" class="border w-100 mb-2"><br>
                    <p>再输一次密码</p>
                    <input type="text" class="w-100  mb-2 border"><br>
                    <p>密码强度</p>
                    <div class="progress"></div>
                    <hr>
                    <input type="checkbox"><span>我同意《用户手册》和《保密条款》</span>
                    <hr>
                    <div class="row" id="div_btn">
                        <button class="btn1 mx-3" id="b-register">注册</button>
                        <button class="btn1 mx-3 text-muted mt-md-2  " id="b-login">已有账号了？请登录</button>
                    </div>
                    <p class="i-QQ mt-sm-2">第三方账号登录：<i class="iconfont">&#xe631;</i></a></p>
                </div>

            </div>
        </div>
    </div>
    <footer>
        <div id="footer"></div>
    </footer>
</body>
<script>
    //使用ajax引入静态页面
    $(function () {
        $.ajax({
            url:"header.html",
            context:document.body,
             success:function (sView) {
                 $("#header").append($(sView));
             }
        });
        $.ajax({
            url:"footer.html",
            context:document.body,
            success:function (sView) {
                $("#footer").append($(sView));
            }
        });
    })
</script>
</html>